<script lang="tsx" >
import { defineComponent, PropType, watch } from "vue";
import $api from '@/api'
import { reactive, ref } from 'vue-demi'
import { API } from "@/global";
import config from "../../../config";

/*
*  @markdown编译器:  mavon-editor  ^3.0.0-beta  
*  @URL:https://www.npmjs.com/package/mavon-editor/v/next
 */
export default defineComponent({
  props: {
    see: { type: Boolean, default: false },
    form: { type: Object as PropType<API.IParams>, default: {} },
    fieldKey: { type: String, required: true },
    width: { type: Number, default: 100 },
    height: { type: Number, default: 500 },
  },

  setup(props, { emit }) {

    const state = reactive({
      toolbars: {
        bold: true,        // 粗体
        italic: true,      // 斜体
        header: true,      // 标题
        underline: true,   // 下划线
        quote: true,       // 引用
        ol: true,          // 有序列表
        ul: true,          // 无序列表
        link: true,        // 链接
        imagelink: true,   // 图片链接
        code: true,        // code
        table: true,       // 表格
        undo: true,        // 上一步
        redo: true,        // 下一步
        alignleft: true,   // 左对齐
        aligncenter: true, // 居中
        alignright: true,  // 右对齐
        help: true,        // markdown帮助
        preview: true,     // 预览
        subfield: true,    // 单双屏
        fullscreen: true,  // 全屏编辑
        readmodel: true,   // 沉浸式阅读
        navigation: true,  // 目录
      },
    })

    const mdRef = ref()

    const imgUpload = (pos: any, $file: File) => {
      const formData = new FormData()
      formData.append('file', $file)
      $api.UploadImg(formData).then(({ data }: { data: IImgUploadForm }) => {
        data.message === '上传成功' && (mdRef.value.$img2Url(pos, config.baseUrl + data.img_url))
      })
    }

    return () => {

      return (
        <div class="editor-common">
          <mavon-editor
            v-model={props.form[props.fieldKey!]}
            ref={mdRef}
            class={{ editor: true, bdn: props.see }}
            style={{ width: props.width + '%', height: props.see ? 'auto' : props.height }}
            toolbars={state.toolbars}
            subfield={false}
            defaultOpen={props.see ? 'preview' : 'edit'}
            toolbarsFlag={props.see ? false : true}
            onImgAdd={imgUpload}
            placeholder="请输入...">
          </mavon-editor>
        </div>
      )
    }
  }
})

</script>


<style lang="scss">
.editor-common {
  width: 100%;
  min-height: 300px !important;

  .editor {
    box-shadow: none !important;
    border: 1px solid #777 !important;
    height: 100%;

    &:hover {
      border: 1px solid var(--el-color-primary) !important;
    }
  }

  .bdn {
    border: 1px solid #fff !important;

    &:hover {
      border: 1px solid #fff !important;
    }
  }
}

.v-note-wrapper {
  z-index: 998;
  padding: 0;
}

.v-note-help-wrapper {
  z-index: 99999;

  ul {
    display: none;
  }
}

.v-note-wrapper.fullscreen {
  z-index: 1000;
}

// .v-show-content,
// .v-note-show {
//   background-color: rgb(252, 252, 252) !important;
// }
</style>